﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>01.TableView</title>
	<script src="Scripts/class.js"></script>
	<script src="Scripts/mustache.js"></script>
	<script src="Scripts/table-view.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
	<script type="x-mustache-template" id="person-template">	
        <strong>{{fullname}}</strong>
        
		{{#marks}} 
		
				{{subject}}: <strong>{{score}}</strong>							
		
		{{/marks}}
		{{^marks}}	   
		
				This student has no marks, yet	  						
		
		{{/marks}}
	</script>

	<div id="content"></div>
	<script>
		var Student = Class.create({
			init: function (fname, lname, marks) {
				this.fname = fname;
				this.lname = lname
				this.marks = marks;
			},
			fullname: function () {
				return this.fname + " " + this.lname;
			}
		});

		var Mark = Class.create({
			init: function (subject, score) {
				this.subject = subject;
				this.score = score;
			}
		});

		var people = [
			new Student("Doncho", "Minkov", [new Mark("Math", 4), new Mark("JavaScript", 6)]),
			new Student("Nikolay", "Kostov", [new Mark("MVC", 6), new Mark("JavaScript", 5)]),
			new Student("Ivaylo", "Kendov", [new Mark("OOP", 4), new Mark("C#", 6)]),
			new Student("Svetlin", "Nakov", [new Mark("Unit Testing", 5), new Mark("WPF", 6)]),
			new Student("Asya", "Georgieva", [new Mark("Automation Testing", 6), new Mark("Manual Testing", 4)]),
			new Student("Georgi", "Georgiev")
		];

		var personTemplate = Mustache.compile(document.getElementById("person-template").innerHTML);
		var listView = controls.getTableView(2, people);

		var tableHtml = listView.render(personTemplate);

		console.log(tableHtml);

		document.getElementById("content").innerHTML = tableHtml;
	</script>
</body>
</html>
